<template>
  <div class="base-data-page">
    <div class="tabs-box">
      <el-tabs v-model="activeName">
        <el-tab-pane label="作物管理-品种信息维护" name="Page1">
        </el-tab-pane>
        <el-tab-pane label="生育期维护" name="Page2">
        </el-tab-pane>
        <el-tab-pane label="病虫害库维护" name="Page3">
        </el-tab-pane>
        <el-tab-pane label="土壤数据维护" name="Page4">
        </el-tab-pane>
        <el-tab-pane label="施肥方案维护" name="Page5">
        </el-tab-pane>
        <el-tab-pane label="种植方案维护" name="Page6">
        </el-tab-pane>
        <component :is="activeName"></component>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Page1 from './page1'
import Page2 from './page2'
import Page3 from './page3'
import Page4 from './page4'
import Page5 from './page5'
import Page6 from './page6'
export default {
  name: 'Index',
  components: {
    Page1,
    Page2,
    Page3,
    Page4,
    Page5,
    Page6
  },
  data() {
    return {
      activeName: 'Page6'
    }
  }
}
</script>

<style lang="scss">
.base-data-page {
  background-color: #fff;
  height: 100%;
  padding: 20px;
  .tabs-box {
    height: 100%;
    .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-tabs__content {
        flex-grow: 1;
      }
    }
  }
}
</style>
